<template>
  <div class="outer-container">
    <div class="space">
      <!-- <div class="space-head"></div> -->
      <div class="space-mis">
        <el-card style="width: 80%; margin: 10px auto; text-align: center;">

          <el-form ref="formRef" :model="data.form" label-width="80px" :rules="data.rules">
            <el-form-item>
              <template #default="scope">
                <el-image style="width: 100px; height: 100px; border-radius: 20%; margin-bottom: 20px; display: block;"
                          :src="data.avatar"
                          :preview-src-list="[data.avatar]"
                          preview-teleported="true"/>
              </template>
            </el-form-item>
            <el-form-item>
              <el-upload ref="upload"
                         action="http://localhost:9090/files/upload"
                         :on-success="filesUploadSuccess"
              >
                <el-button type="primary">修改头像</el-button>
              </el-upload>
            </el-form-item>
            <el-form-item label="账号">
              <el-input v-model="data.form.username" disabled/>
            </el-form-item>
            <el-form-item label="昵称">
              <el-input v-model="data.form.nickName"/>
            </el-form-item>
            <el-form-item label="性别">
              <el-radio v-model="data.form.gender" label="男">男</el-radio>
              <el-radio v-model="data.form.gender" label="女">女</el-radio>
            </el-form-item>
            <el-form-item label="电话号码" prop="phoneNumber">
              <el-input v-model="data.form.phoneNumber"/>
            </el-form-item>
            <el-form-item label="出生日期">
              <el-date-picker
                  v-model="data.form.dateOfBirth"
                  type="date"
                  format="YYYY-MM-DD" value-format="YYYY-MM-DD"
                  @change="getBirthDate"
                  placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="地址">
              <el-input v-model="data.form.address"/>
            </el-form-item>
          </el-form>
          <div style="text-align: center">
            <el-button type="primary" @click="update">保存</el-button>
            <el-button type="warning" @click="putPassword">修改密码</el-button>
            <el-button type="danger" @click="logout">返回主页</el-button>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script setup>
import request from "@/utils/request";
import {reactive, ref} from "vue";
import {ElMessage} from "element-plus";
import router from "@/router";

const formRef = ref()
const data = reactive({
  form: {},
  avatar: '',
  rules: {
    phoneNumber: [
      {pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur'}
    ],
  }
})

data.form = JSON.parse(localStorage.getItem("xm-pro-user"))
data.avatar = data.form.avatar
console.log(data.form)

const update = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      data.form.avatar = data.avatar
      console.log(data.form.avatar)
      request.put("/user", data.form).then(res => {
        console.log(data.form)
        if (res.code === '0') {
          ElMessage.success("保存成功")
          localStorage.setItem("xm-pro-user", JSON.stringify(data.form))
          setTimeout(() => {
            window.location.reload();
          }, 500)
        } else {
          ElMessage.error("保存失败")
        }
      })
      console.log(data.form)
      // ElMessage.refs['upload'].clearFiles() //清除历史upload
    }
  })
}


const filesUploadSuccess = (res) => {
  data.avatar = res.data
}

const getBirthDate = (date) => {
  data.form.dateOfBirth = date
  console.log(date)
}

const logout = () => {
  router.push('/');
}

const putPassword = () => {
  router.push('/userPassword');
}

</script>


<style scoped>
.outer-container {
  background-image: url("https://img2.baidu.com/it/u=2783925180,1561102608&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=1422");
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh; /* 使容器占满整个视口高度，可以根据需要调整 */
 /*border: 2 px solid #0e0c0c; !* 大边框 *!*/
  padding: 20px; /* 内边距，可以根据需要调整 */
  box-sizing: border-box; /* 确保内边距不影响布局宽度 */
}

.space {
  width: 100%;
  max-width: 600px; /* 限制最大宽度，以便在大屏幕上居中 */
  text-align: center;
}

.space-head {
  width: 40%;
  margin: 10px auto; /* 水平居中 */
/*/ / border: #0e0c0c 1 px solid;*/
}

.space-mis {
  margin: 0 auto; /* 水平居中 */
}
</style>
